<template>
  <div>
    姓名：{{ person.name }} <br />
    年龄：{{ person.age }} <br />
    <button @click="changeName">更改姓名</button> &nbsp; &nbsp;
    <button @click="changeAge">更改Age</button>&nbsp; &nbsp;
    <button @click="changePerson">更改Person</button>&nbsp; &nbsp;
  </div>
</template>

<script lang="ts" setup name="UseWatchObjectType">
import { ref, watch } from "vue";
let person = ref({ name: "张三", age: 18 });

function changeName() {
  person.value.name += "~";
}
function changeAge() {
  person.value.age += 1;
}

function changePerson() {
  person.value = { name: "李四", age: 10 };
}

watch(
  person,
  (newValue, oldValue) => {
    console.log("Person更改了,新值为", newValue, "老值为：", oldValue);
  },
  { deep: true } //表示对person中的内容也进行监视
);

// const stopWatch = watch(age, (newValue, oldValue) => {
//   console.log("Age值更改了，新值为", newValue, "老值为：", oldValue);
//   if (age.value === 25) {
//     console.log("Age等于25了，就不进行监视了");
//     stopWatch(); //表示停止监视
//   }
// });
</script>
